<template>
  <section class="v-link">
    <section class="v-link-inner">
      <div class="v-link-inner-left">链接地址</div>
      <div class="v-link-inner-right" @click="handleLink">
        {{ value && value.name ? value.name : '选择链接' }}
        <i v-if="value && value.name" @click.stop="clearLink" class="el-icon-circle-close" />
        <i class="el-icon-arrow-right" />
      </div>

    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import VInput from '@/components/CustomPage/fields/widget/input'
export default {
  name: 'VLink',
  inject: ['focusId', 'pageVar', 'focusName', 'getListItemInfo'],
  components: { VInput },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  computed: {
    type() {
      return this.option.type || 'default'
    },
    list() {
      return this.option.list || []
    },
    layout() {
      return this.option.layout || 'horizon'
    }
  },
  methods: {
    /**
     * 清空链接
     * */
    clearLink(){
      this.value=undefined

    },
    getValue() {
      return this.value
    },

    setValue(v) {
      this.$set(this, 'value', v)
    },

    setCheck() {
      let { value, required } = this
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    async handleLink() {
      // console.log(this.getValue(),'====')
      // return
      const { default: DialogLinks } = await import('@/components/CustomPage/pagemaker/links')
      this.$modal.show(DialogLinks, {
        title: '选择链接',
        type: '',
        compVar: this.getListItemInfo(this.focusName())?.componentVariable ? JSON.parse(this.getListItemInfo(this.focusName()).componentVariable) : [],
        pageVar: this.pageVar(),
        fn: this.linkcomit,
        upValue: this.getValue() === undefined ? {} : this.getValue()
      }, {
        width: 800,
        height: 'auto',
        clickToClose: false
      })
    },

    linkcomit(type, name, link, params) {
      this.value = Object.assign({}, { type, name, link, params })
      // console.log(' linkcomit', this.value)
      this.handleChange()
    },

    handleChange(e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
.v-link {
  &-inner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-right {
      cursor: pointer;
      color: $a1;
    }
  }
}
</style>
